<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="4" :sm="8">
            <a-form-item label="登录账号">
              <a-input v-model="queryParam.login" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="8">
            <a-form-item label="用户姓名">
              <a-input v-model="queryParam.companyName" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="8">
            <wx-filter-depart
              :org-flag="0"
              v-model="queryParam.departCode"
              :benbu-flag="queryParam.benbuFlag"
              @ok="(benbuFlag)=>{this.queryParam.benbuFlag = benbuFlag}"
            ></wx-filter-depart>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="3" :sm="8">
              <a-form-item label="性别">
                <a-select v-model="queryParam.sex" placeholder="请选择性别">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option
                    v-for="(item) in this.$sysDictOptions('sex')"
                    :key="item.k"
                    :value="parseInt(item.k)">
                    {{ item.v }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--            <a-col :md="6" :sm="8">-->
            <!--              <a-form-item label="手机号码">-->
            <!--                <a-input placeholder="请输入手机号码查询" v-model="queryParam.moible"></a-input>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <a-col :md="4" :sm="8">
              <a-form-item label="用户状态">
                <a-select v-model="queryParam.disFlag" placeholder="请选择">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option
                    v-for="(item) in this.$sysDictOptions('frozenFlag')"
                    :key="item.k"
                    :value="item.k">
                    {{ item.v }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--            <a-col :md="6" :sm="8">-->
            <!--              <a-form-item label="岗位">-->
            <!--                <a-select v-model="queryParam.postFlag" placeholder="请选择">-->
            <!--                  <a-select-option value="">请选择</a-select-option>-->
            <!--                  <a-select-option-->
            <!--                    v-for="(item) in this.$sysDictOptions('postFlag')"-->
            <!--                    :key="item.k"-->
            <!--                    :value="item.k">-->
            <!--                    {{ item.v }}-->
            <!--                  </a-select-option>-->
            <!--                </a-select>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
          </template>
          <a-col :md="4" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
                icon="search">查询</a-button>
              <a-button
                icon="reload"
                style="margin-left: 8px"
                @click="() => {this.$objToReset(queryParam),$refs.table.refresh(true)}">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button
        type="primary"
        icon="plus"
        @click="$refs.companyFormModal.add()"
        style="margin-bottom: 15px"
        v-wx-role="50301">新建
      </a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item>
            <a-popconfirm
              title="确定删除吗?"
              @confirm="() => handleCompanyDelete()"
              v-wx-role="50304">
              <a>
                <a-icon type="delete"/>
                删除
              </a>
            </a-popconfirm>
          </a-menu-item>
          <a-menu-item>
            <a-popconfirm
              title="确定冻结吗?"
              @confirm="() => handleCompanyDelFlag(undefined,1)"
              v-wx-role="50306">
              <a>
                <a-icon type="lock"/>
                冻结
              </a>
            </a-popconfirm>
          </a-menu-item>
          <a-menu-item>
            <a-popconfirm
              title="确定解冻吗?"
              @confirm="() => handleCompanyDelFlag(undefined,0)"
              v-wx-role="50306">
              <a>
                <a-icon type="unlock"/>
                解冻
              </a>
            </a-popconfirm>
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="companyId"
      :columns="columns"
      :scroll="{ x: 1300 }"
      :data="loadData"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
      showPagination="auto"
    >
      <span slot="action" slot-scope="text,record">
        <template>
          <a @click="handleCompanyEdit(record)" v-wx-role="50303"><a-icon tyle="edit"/> 编辑</a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多
              <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="record.disFlag==0" v-wx-role="50306">
                <a-popconfirm title="确定冻结吗?" @confirm="() => handleCompanyDelFlag(record.companyId,1)">
                  <a>冻结</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-if="record.disFlag==1" v-wx-role="50306">
                <a-popconfirm title="确定解冻吗?" @confirm="() => handleCompanyDelFlag(record.companyId,0)">
                  <a>解冻</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确定重置密码吗?"
                  @confirm="() => handleCompanyResetPasswd(record.companyId)"
                  v-wx-role="50305">
                  <a>重置密码</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确定删除吗?"
                  @confirm="() => handleCompanyDelete(record.companyId)"
                  v-wx-role="50304">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </span>
      <template slot="avatarslot" slot-scope="text, record">
        <div class="anty-img-wrap">
          <a-avatar
            shape="square"
            :src="getAvatarView(record.avatar)"
            icon="user"/>
        </div>
      </template>
    </s-table>

    <user-modal ref="companyFormModal" @ok="companyFormModalOk"></user-modal>
  </a-card>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import { getCompanyList } from '@/api/api'
  import { deleteAction, postAction } from '@/api/manage'
  import UserModal from '@/views/base/modules/UserModal'
  import WxFilterDepart from '@/components/WxFilterDepart/WxFilterDepart'

  export default {
    name: 'CompanyList',
    components: {
      STable,
      Ellipsis,
      UserModal,
      WxFilterDepart
    },
    data () {
      return {
        // 查询参数
        queryParam: {
          benbuFlag: false
        },
        toggleSearchStatus: false,
        // 表头
        columns: [
          {
            title: '登录账号',
            dataIndex: 'login',
            width: 150
          },
          {
            title: '用户姓名',
            dataIndex: 'companyName',
            width: 250
          },
          {
            title: '性别',
            dataIndex: 'sex',
            width: 80,
            customRender: (text) => this.$sysDictFilter(text, 'sex')
          },
          {
            title: '手机号码',
            width: 150,
            dataIndex: 'mobile'
          },
          {
            title: '组织',
            dataIndex: 'departCode',
            customRender: (text) => this.$getDepartmentName(text)
          },
          // {
          //   title: '岗位',
          //   dataIndex: 'postFlag',
          //   width: '300px',
          //   customRender: (text) => this.$sysDictFilter(text, 'postFlag')
          // },
          {
            title: '状态',
            dataIndex: 'disFlag',
            width: 100,
            customRender: (text) => this.$sysDictFilter(text, 'frozenFlag')
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            width: '300px',
            customRender: (text) => this.$momentFormat(text, 'YYYY-MM-DD')
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('loadData.parameter', parameter)
          return getCompanyList(Object.assign(parameter, this.queryParam))
            .then(res => {
              this.$refs.table.clearSelected()
              return res.result
            })
        },
        selectedRowKeys: [],
        options: {
          alert: {
            clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
            type: 'checkbox'
          }
        },
        url: {
          resetPasswd: '/system/company/resetpasswd',
          deleteCompany: '/system/company/delete',
          disFlagCompany: '/system/company/setDisable'
        }
      }
    },
    computed: {},
    methods: {
      handleToggleSearch () {
        this.toggleSearchStatus = !this.toggleSearchStatus
      },
      // 头像处理
      getAvatarView: function (avatar) {
        return this.$getFileAccessHttpUrl(avatar)
      },
      // 用户编辑
      handleCompanyEdit (record) {
        this.$refs.companyFormModal.edit(record)
      },
      // 删除用户
      handleCompanyDelete (record) {
        if (!record) {
          // 如果没有传入，那么批量删除
          record = this.selectedRowKeys.join(',')
        }
        return deleteAction(this.url.deleteCompany, { companyIds: record })
          .then((res) => {
            this.$message.success('删除成功!')
            this.$refs.table.refresh(true)
            this.$refs.table.clearSelected()
          })
      },
      // 冻结，解冻
      handleCompanyDelFlag (record, type) {
        if (!record) {
          // 如果没有传入，那么批量冻结，解冻
          record = this.selectedRowKeys.join(',')
        }
        return deleteAction(this.url.disFlagCompany, { companyIds: record, type: type })
          .then((res) => {
            this.$message.success('操作成功!')
            this.$refs.table.refresh(true)
          })
      },
      // 重置密码
      handleCompanyResetPasswd (record) {
        return postAction(this.url.resetPasswd, { companyIds: record })
          .then((res) => {
            this.$message.success('重置成功!')
          })
      },
      // 右侧单击
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
      },
      // 新增用户
      addCompany: function () {
        this.$refs.companyFormModal.roleDisabled = false
        this.$refs.companyFormModal.selectedRole = [this.selectedRowKeys[0]]
        this.$refs.companyFormModal.add()
        this.$refs.companyFormModal.title = '新增'
      },
      // 保存用户 回调
      companyFormModalOk () {
        this.$refs.table.refresh()
      }
    }
  }
</script>
